import React ,{Component,useState}from 'react'
import Header from './components/Header'
import Advert from './components/Advert'
import Footer from './components/Footer'
import {Row,Col,List,Breadcrumb} from 'antd'
import {
  CalendarOutlined,
  FolderOutlined,
  FireOutlined,
} from '@ant-design/icons';
import Author from './components/Author.js';
import axios from 'axios'
import servicePage from './config/apiUrl'
import { Link,withRouter,Route } from 'react-router-dom'


class ListById extends Component {
  constructor(){
    super()
    this.state={
      mylist:[],
      ListId:0
    }
  }
  //页面内部跳转的时候重新获取结果
  componentWillReceiveProps(nextProps) {
    // this.contentId = nextProps.match.params.id
    axios(servicePage.getListById+nextProps.match.params.id).then(
      (res)=>{
        this.setState({
          ListId:nextProps.match.params.id,
          mylist:res.data.data})
      }
    ).catch(function (error) {
          console.log(error);
      }) 
   }
  //页面初始化的时候选择的参数
  componentDidMount (){
    let id = this.props.match.params.id
    this.contentId = id
    axios(servicePage.getListById+id).then(
      (res)=>{
        this.setState({
          ListId:id,
          mylist:res.data.data})
      }
    ).catch(function (error) {
          console.log(error);
      }) 
    
  }
  render() {
    const contentList ={
      1:'教程',
      2:'生活'
    }
    return (
      <div>
      <Header></Header>
      {/* <Route path="/list/:id" component={ListById}/> */}
      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}>
          <div className='bread-div'> 
            <Breadcrumb>
              <Breadcrumb.Item ><a href='/main'>首页</a></Breadcrumb.Item>
              <Breadcrumb.Item ><a >{contentList[this.state.ListId]}</a></Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <List
            header={<div>最新跟新的内容如下～</div>}
            itemLayout = "vertical"
            dataSource={this.state.mylist}
            renderItem={(item)=>(
              <List.Item>
                <div className="list-title">
                <Link to={{pathname:"/detail/"+item.id}}>{item.title}</Link>
                </div>
                <div className="list-icon">
                <span><CalendarOutlined />{item.addTime}</span> &nbsp;
                  <span><FolderOutlined />{item.typeName}</span>&nbsp;
                  <span><FireOutlined />{item.view_count}</span>&nbsp;
                </div>
                <div className="list-context">{item.inrroduce}</div>
              </List.Item>
            )}
          />
        </Col>
        <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author></Author>
          <Advert></Advert>
        </Col>
      </Row>
      <Footer></Footer>
    </div>
    )
  }
}
export default withRouter(ListById)

